<template>
    <!-- <v-chart :options="chartOptions" style="height: 400px;"></v-chart> -->
    <div :id="props.uuid" class="echart-commom" v-stopPropagation @click="clickHanlder"></div>
</template>

<script setup>
import {ref, onMounted,getCurrentInstance, defineProps } from 'vue'
import initProps from '@/composables/Props.js';
const { appContext : { config: { globalProperties:{$echarts} } } } = getCurrentInstance()
const props = defineProps(initProps())
const clickHanlder = (el)=> {
  console.log(el)
  document.getElementById(props.uuid).style.zIndex = 1
}
const changeLine = ()=>{
  // 获取组件实例
  const myEChart= $echarts.init(document.getElementById(props.uuid));
  // 设置配置项
  const option = {
    xAxis: {
      data: ["A", "B", "C", "D", "E"],
    },
    yAxis: {},
    series: [
      {
        data: [10, 22, 28, 43, 49],
        type: "line",
        stack: "x",
      },
      {
        data: [5, 4, 3, 5, 10],
        type: "line",
        stack: "x",
      },
    ],
  };
  // 复制
  myEChart.setOption(option);
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    myEChart.resize();
  });
}
onMounted(()=> {
  changeLine()
})
</script>
<style lang="scss" scoped>
.echart-commom{
  height: 200px;
  height: 100%;
  background: black;
  position: relative;
}
</style>